<template>
  <a-layout>
    <a-layout-header>
      <div class="logo" @click="index">
        <img
          src="/src/assets/logo2.png"
          alt="logo"
          title="logo"
          style="height: 50px"
        />
      </div>
      <a-menu mode="horizontal" theme="dark" :style="{ lineHeight: '64px' }">
        <a-menu-item style="float: right" @click="exit">退出登录</a-menu-item>
        <a-menu-item key="1" @click="index">
          <pie-chart-outlined />
          <span>首页</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <ThunderboltOutlined />
              <span>能源管理</span>
            </span>
          </template>
          <a-menu-item key="3" @click="createEnergy">创建能源</a-menu-item>
          <a-menu-item key="4" @click="energyDetail">能源详情</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>用户管理</span>
            </span>
          </template>
          <a-menu-item key="7" @click="balanceManagement">余额管理</a-menu-item>
          <a-menu-item key="8" @click="userManagement">用户管理</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="3" @click="systemSetting">
          <desktop-outlined />
          <span>系统设置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout style="min-height: 100vh">
      <a-layout>
        <a-layout-content style="margin: 0 16px">
          <div
            :style="{ margin: '10px 0 0 0', background: '#fff', height: '95%' }"
          >
            <router-view></router-view>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  ThunderboltOutlined,
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken } from "@/common";

export default defineComponent({
  name: "LangSelect",
  props: {
    size: {
      type: String,
      default: "small",
    },
  },
  components: {
    ThunderboltOutlined,
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
  },
  setup() {
    const getCurrentUser = () => {};
    const router = useRouter();
    const currentUser = ref({});

    // 网页router刷新
    const index = () => {
      router.push({ path: "/m_home/index" });
    };
    const createEnergy = () => {
      router.push({ path: "/m_home/energyManagement/createEnergy" });
    };
    const energyDetail = () => {
      router.push({ path: "/m_home/energyManagement/energyDetail" });
    };
    const balanceManagement = () => {
      router.push({ path: "/m_home/userManagement/balanceManagement" });
    };
    const userManagement = () => {
      router.push({ path: "/m_home/userManagement/userManagement" });
    };
    const systemSetting = () => {
      router.push({ path: "/m_home/systemSetting" });
    };

    const exit = () => {
      del("/manager/mHome/exit").then((res) => {
        removeLocalToken();
        router.push("/m_login");
      });
    };

    return {
      index,
      createEnergy,
      energyDetail,
      balanceManagement,
      userManagement,
      systemSetting,
      exit,
    };
  },

  data() {
    return {
      collapsed: ref(false),
      selectedKeys: ref(["1"]),
    };
  },
});
</script>
<style>
.logo {
  float: left;
  width: 120px;
  height: 31px;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
</style>